<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="test1"></div>
  <div id="test2"></div>


  <script src='../js/react.development.js'></script>
  <script src='../js/react-dom.development.js'></script>
  <script src='../js/babel.min.js'></script>

  <script type="text/babel">
    // 函数组件
    function Components1() {
      // 在严格模式下，直接调用函数，this的指向 undefined， 说明函数组件是被 React 直接进行调用的
      // console.log(this);
      
      return <h1>函数组件</h1>;
    }
    // class组件
    class Components2 extends React.Component {
      render() {
        // 这里的this指向 实例对象， 说明React在调用的时候是通过 new 来进行操作的
        console.log(this);
        
        return  <h1>class组件</h1>;
      }
    }
    // 渲染到页面
    ReactDOM.render(<Components1 />, document.getElementById('test1'))
    ReactDOM.render(<Components2 />, document.getElementById('test2'))

    // class组件的render过程
    /* 
      1. React 内部会创建组件实例对象（组件对象）
      2. 调用 render() 得到虚拟DOM，并解析为 真实DOM
      3. 插入到指定的页面元素内部
     */
  </script>
</body>

</html>